<template>
    <!-- 搜索工作栏 -->
    <div class='header news-actions-content'>
        <div class="search-tools ">
            <el-row style="margin-bottom: 10px; width: 100%">
                <el-col :span="5">
                    <el-input
                        :style="{ width: '220px'}"
                        placeholder="请输入标题"
                        v-model="searchParams.title"
                        size='small'
                        clearable>
                    </el-input>
                </el-col>
                <el-col :span="5">
                    <el-select
                        v-model="searchParams.typeId"
                        size="small"
                        clearable
                        :style="{ width: '220px'}"
                        placeholder="请选择栏目">
                        <el-option
                            v-for="ele in columnList"
                            :key="ele.value"
                            :label="ele.label"
                            :value="ele.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="5">
                    <el-select
                        v-model="searchParams.status"
                        size="small"
                        clearable
                        :style="{ width: '220px'}"
                        placeholder="请选择发布动态">
                        <el-option
                            v-for="ele in activeList"
                            :key="ele.value"
                            :label="ele.label"
                            :value="ele.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="5">
                    <el-select
                        v-model="searchParams.isTop"
                        size="small"
                        clearable
                        :style="{ width: '220px'}"
                        placeholder="选择是否置顶">
                        <el-option
                            v-for="ele in isTopList"
                            :key="ele.value"
                            :label="ele.label"
                            :value="ele.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button @click="resetSearch" size="small">重置</el-button>
                    <el-button @click="handleSearch" size="small" type="primary">搜索</el-button>
                    <el-button @click="handleAdd" size="small" type="primary">新建</el-button>
                </el-col>
            </el-row>
            <!-- <SearchBar :searchConfig="searchConfig" 
                @transferSearchParams="transferSearchParams" 
                @search="handleSearch"
                ref="formParams" labelWidth="100px" labelPosition="right" style="margin: 0 0 15px 0">
                <el-button slot="inner" @click="handleAdd" size="small" type="primary">新建</el-button>
            </SearchBar> -->
        </div>
        

        <!-- 操作工具栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button @click="handleBatchOperate('noRelease')" :disabled="tableSelectList.length === 0" type="primary" plain icon="el-icon-plus" size="mini">
                    批量不发布
                </el-button>
                <el-button @click="handleBatchOperate('delete')" :disabled="tableSelectList.length === 0" type="danger" plain icon="el-icon-plus" size="mini">
                    批量删除
                </el-button>
                <el-button @click="handleBatchOperate('change')" :disabled="tableSelectList.length === 0" type="primary" plain icon="el-icon-plus" size="mini">
                    批量更换栏目
                </el-button>
                <el-button @click="handleBatchOperate('release')" :disabled="tableSelectList.length === 0" type="primary" plain icon="el-icon-plus" size="mini">
                    批量发布
                </el-button>
            </el-col>
        </el-row>
        <Table ref="tableList"
            :tableConfig="tableConfig" 
            :tableData="tableData"
            :total="total"
            :pageNo="pageNo"
            :pageSize="pageSize"
            @sortChange="sortChange"
            @handleSelectionChange="handleSelectionChange"
            @handleChangePage="handleChangePage">
            <template slot-scope="scope" slot="id">
                <div class="title-box">
                    <span>{{scope.data.index + (pageNo - 1) * pageSize + 1}}</span>
                </div>
            </template>
            <template slot-scope="scope" slot="title">
                <div class="title-box">
                    <div class="ranking-icons">
                        <span class="icon-item" v-if="scope.data.row && scope.data.row.isTop === 1">置顶</span>
                    </div>
                    <span>{{scope.data.row.title}}</span>
                </div>
            </template>
            <el-table-column align="center" label="操作" width="360">
                <template slot-scope="scope">
                    <div class="btn-box">
                        <span class="btns" @click="handleView(scope.row)">查看</span>
                        <span class="btns" @click="handleSetTop(scope.row)" v-if="scope.row.isTop === 0">置顶</span>
                        <span class="btns" @click="handleSetTop(scope.row)" v-if="scope.row.isTop === 1">取消置顶</span>
                        <!-- <span class="btns" @click="handleCancelPush(scope.row)">暂不发布</span> -->
                        <span class="btns" @click="handleCancelPush(scope.row, 'noRelease')" v-if="scope.row.status === '1'">暂不发布</span>
                        <span class="btns" @click="handleCancelPush(scope.row, 'release')" v-if="scope.row.status === '0'">发布</span>
                        <span class="btns" @click="handleEdit(scope.row)">编辑</span>
                        <span class="btns delete" @click="handleDelete(scope.row)">删除</span>
                    </div>
                </template>
            </el-table-column>
        </Table>
        <AddPop ref="addPop" :columnList="columnList" @addSuccess="handleSearch" />
        <ViewNews ref="viewNews" />
        <BatchPush ref="batchPush" :columnList="columnList" @handleConfirm="handleConfirm" />
    </div>
</template>
<script>
import { TYPE, leftTableConfig } from './initData';
import SearchBar from '@/views/components/SearchBar';
import Table from "@/views/components/Table";
import AddPop from './components/addPop.vue';
import ViewNews from './components/viewNews.vue';
import BatchPush from './components/batchChangeColumn.vue';
import { getTableList, topping, getColumnList, updateBatch } from '@/api/content-manage/researchResult.js';
import { formatDate } from '@/utils/index.js'
const tipsEnum = {
    noRelease: '不发布',
    delete: '删除',
    release: '发布'
}
export default {
    name: 'NewsList',
    components: {
        SearchBar,
        Table,
        AddPop,
        ViewNews,
        BatchPush
    },
    data() {
        return {
            // searchConfig: leftSearchConfig,
            tableConfig: leftTableConfig,
            tableData: [],
            total: 100,
            pageNo: 1,
            pageSize: 10,
            tableSelectList: [],
            searchParams: {},
            columnList: [],
            activeList: [{ label: '未发布', value: '0'}, { label: '已发布', value: '1'}],
            isTopList: [{label: '置顶', value: 1}, {label: '未置顶', value: 0}],
            sortingFields: null
        }
    },
    created() {
        this.getColumnList();
        this.getList();
    },
    methods: {
        transferSearchParams(params) {
            this.searchParams = {};
            this.searchParams = params;
        },
        async resetSearch () {
            this.searchParams = {};
            this.sortingFields = null;
            this.$refs.tableList && this.$refs.tableList.$children[0].clearSort();
            this.handleSearch();
        },
        handleSearch() {
            this.pageNo = 1;
            this.getList();
        },
        async getList() {
            const { code, data } = await getTableList({
                ...this.searchParams,
                type: TYPE,
                sortingFields: this.sortingFields,
                pageNo: this.pageNo,
                pageSize: this.pageSize
            });
            if (code === 0) {
                const list = data.list.map(v => {
                    return {
                        ...v,
                        releaseTimeStr: formatDate(v.releaseTime),
                        updateTimeStr: formatDate(v.updateTime),
                        statusName: v.status === '0' ? '未发布' : '发布'
                    }
                })
                this.tableData = list;
                this.total = data.total;
            } else {
                this.tableData = [];
            }
        },
        // 获取栏目列表
        async getColumnList() {
            this.columnList = await this.columnListApi();
        },

        async columnListApi() {
            let columnList = [];
            const { code, data } = await getColumnList({
                pageNo: 1,
                pageSize: 1000,
                type: TYPE,
                status: '1'
            });
            if (code === 0 && data && data.list && data.list.length > 0) {
                columnList = data.list.map(v => {
                    return {
                        label: v.name,
                        value: v.id
                    }
                });
            }
            return columnList;
        },

        // 批量操作group
        async handleBatchOperate(operate) {
            const confirmPopEnum = ['noRelease', 'release', 'delete']
            if (confirmPopEnum.indexOf(operate) > -1) {
                this.$confirm(`是否确认${tipsEnum[operate]}?`, '提示').then( async() => {
                    const { code, msg } = await updateBatch({
                        ids: this.tableSelectList.map(v => v.id),
                        operate,
                        typeId: '',
                        type: TYPE
                    });
                    if (code !== 0) {
                        this.$message.error(msg);
                        return
                    };
                    this.handleSuccessCall();
                });
            } else {
                this.$refs.batchPush && this.$refs.batchPush.open();
            }
        },

        // 批量更换栏目确认
        async handleConfirm({typeId, done}) {
            const { code, msg } = await updateBatch({
                ids: this.tableSelectList.map(v => v.id),
                operate: 'typeIds',
                typeId,
                type: TYPE
            });
            if (code !== 0) {
                this.$message.error(msg);
                return
            };
            done();
            this.handleSuccessCall();
        },

        async handleSetTop(row) {
            this.$confirm(row.isTop === 0 ? '是否确定置顶？' : '是否确定取消置顶', '设置置顶').then( async() => {
                const { code, msg } = await topping({
                    id: row.id,
                    isTop: row.isTop === 0 ? 1 : 0,
                    type: TYPE
                });
                if (code === 0) {
                    this.$message.success(row.isTop === 0 ? '置顶成功' : '取消置顶成功');
                    this.handleSearch();
                } else {
                    this.$message.error(msg);
                }
            })
        },

        handleSuccessCall() {
            this.getList();
            this.tableSelectList = [];
        },

        handleChangePage({pageNo, pageSize}) {
            this.pageNo = pageNo;
            this.pageSize = pageSize;
            this.getList();
        },
        handleSelectionChange(val) {
            this.tableSelectList = val;
        },
        handleView(row) {
            this.$refs.viewNews && this.$refs.viewNews.open({
                id: row.id
            }); 
        },
        // 暂停发布
        async handleCancelPush(row, operate) {
            const mark = operate === 'noRelease' ? '不发布' : '发布'
            this.$confirm(`是否确认${mark}?`, '提示').then( async() => {
                const { code } = await updateBatch({
                    ids: [row.id],
                    operate,
                    type: TYPE
                });
                if (code !== 0) return;
                this.$message.success('操作成功');
                this.handleSuccessCall();
            });
        },
        // 编辑
        async handleEdit(row) {
            this.columnList = await this.columnListApi();
            this.$refs.addPop && this.$refs.addPop.open({pageType: 'edit', id: row.id, columnList: this.columnList});
        },
        // 删除
        handleDelete(row) {
            this.$confirm(`是否确认删除?`, '提示').then( async() => {
                const { code } = await updateBatch({
                    ids: [row.id],
                    operate: 'delete',
                    type: TYPE
                });
                if (code !== 0) return;
                this.$message.success('删除成功');
                this.handleSuccessCall();
            });
        },
        // 新建
        async handleAdd() {
            this.columnList = await this.columnListApi();
            this.$refs.addPop && this.$refs.addPop.open({pageType: 'add', columnList: this.columnList});
            
        },
        sortChange(sortingFields) {
            this.sortingFields = sortingFields;
            this.handleSearch();
        }
    }
}
</script>
<style lang="scss">
    .news-actions-content {
        .el-table__cell {
            position: relative;
            padding: 20px 0;
        }
    }
    
    
</style>
<style lang='scss' scoped>
    .header {
        display: flex;
        flex-direction: column;
        padding: 0 20px;

        .search-tools {
            display: flex;
            justify-content: space-between;
        }
        .btn-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .btns {
                color: #02A7F0;
                cursor: pointer;
                display: inline-block;
                width: 20%
            }
            .delete {
                color: #ff4949;
            }
        }
    }

    .title-box {
        // position: relative;

        .ranking-icons {
            position: absolute;
            left: 0;
            top: 0;

            .icon-item {
                color: blue;
                border: 1px solid blue;
                margin-right: 3px;
                padding: 0 2px;
            }
        }
    }
</style>